import {Form, Modal, Row, Col, Input, InputNumber, Select} from 'antd';
import {useEffect} from 'react';
import {connect} from 'umi';

const DataForm = (props) => {
  const {dispatch, submitting, goodsList, goodsSpecList, serveList, serveCardList} = props;
  const {dataForm, setDataForm, tablePayload, setTablePayload, items, pkgTablePayload, setPkgTablePayload} = props.data;
  const [form] = Form.useForm();

  useEffect(() => {
    dispatch({type: 'MallCommon/fetchServeList'});
    dispatch({type: 'MallCommon/fetchGoodsList'});
  }, [dispatch]);

  /* 初始化表单数据 */
  useEffect(() => {
    if (dataForm && dataForm.itemType !== undefined) {
      form.setFieldsValue({itemType: dataForm.itemType, orderby: 0});
    }
    if (dataForm && dataForm.data) {
      let {data} = dataForm;
      form.setFieldsValue({
        ...data,
        serveCardId: dataForm.data.serveCardId ? dataForm.data.serveCardId : undefined,
      });

      if (dataForm.data.itemType === 0) {
        dispatch({type: 'MallCommon/fetchGoodsSpecList', payload: {goodsId: dataForm.data.goodsId}});
      }
      if (dataForm.data.itemType === 1) {
        dispatch({type: 'MallCommon/fetchServeCardList', payload: {serveId: dataForm.data.serveId}});
      }
    }
  }, [dataForm, form]);

  /* 确定操作 */
  function onOk() {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });

      values.pkgId = items.data.id;

      dispatch({
        type: values.id ? 'PMallPkgItems/edit' : 'PMallPkgItems/add',
        payload: values,
        callback: () => {
          onCancel();
          setTablePayload({...tablePayload});
          setPkgTablePayload({...pkgTablePayload});
        },
      });
    });
  }

  /* 取消操作 */
  function onCancel() {
    setDataForm(undefined);
    form.resetFields();
  }

  /* 选中商品 */
  function onSelectGoods(e) {
    dispatch({type: 'MallCommon/fetchGoodsSpecList', payload: {goodsId: e}});
    form.setFieldsValue({specId: undefined});
  }

  /* 选中服务 */
  function onSelectServe(e) {
    dispatch({type: 'MallCommon/fetchServeCardList', payload: {serveId: e}});
    form.setFieldsValue({serveCardId: undefined});
  }


  return (
    <Modal
      confirmLoading={submitting}
      title={dataForm ? dataForm.title : ''}
      open={dataForm ? dataForm.visible : false}
      onOk={onOk}
      onCancel={onCancel}
      forceRender={true}
      width={800}
      bodyStyle={{paddingTop: 24}}
    >
      <Form layout='horizontal' labelCol={{span: 3}} form={form}>
        {dataForm && dataForm.data && (
          <Form.Item name='id' hidden={true}>
            <Input/>
          </Form.Item>
        )}
        <Form.Item name='itemType' hidden={true}>
          <Input/>
        </Form.Item>

        {(dataForm && (dataForm.itemType === 0 || (dataForm.data && dataForm.data.itemType === 0))) && (
          <>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  name='goodsId' label='商品名称'
                  rules={[
                    {required: true, message: '商品名称不能为空'},
                  ]}>
                  <Select
                    placeholder='请选择商品名称' options={goodsList} allowClear showSearch onSelect={onSelectGoods}
                    filterOption={(input, option) => (option?.label ?? '').includes(input)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  name='specId' label='商品规格'
                  rules={[
                    {required: true, message: '商品规格不能为空'},
                  ]}>
                  <Select
                    placeholder='请选择商品规格' options={goodsSpecList} allowClear showSearch
                    filterOption={(input, option) => (option?.label ?? '').includes(input)}
                  />
                </Form.Item>
              </Col>
            </Row>
          </>
        )}

        {(dataForm && (dataForm.itemType === 1 || (dataForm.data && dataForm.data.itemType === 1))) && (
          <>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  name='serveId' label='服务名称'
                  rules={[
                    {required: true, message: '服务名称不能为空'},
                  ]}>
                  <Select
                    placeholder='请选择服务名称' options={serveList} allowClear showSearch onSelect={onSelectServe}
                    filterOption={(input, option) => (option?.label ?? '').includes(input)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={24}>
                <Form.Item
                  name='serveCardId' label='次卡名称'
                  rules={[
                    {required: true, message: '次卡名称不能为空'},
                  ]}>
                  <Select
                    placeholder='请选择次卡名称' options={serveCardList} allowClear showSearch
                    filterOption={(input, option) => (option?.label ?? '').includes(input)}
                  />
                </Form.Item>
              </Col>
            </Row>
          </>
        )}

        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name='orderby' label='排序属性'
              rules={[
                {required: true, message: '排序属性不能为空'},
              ]}>
              <InputNumber style={{width: '100%'}} placeholder='请输入排序属性'/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};


export default connect(({loading, MallCommon}) => {
  return {
    submitting: loading.effects['PMallPkgItems/add'] || loading.effects['PMallPkgItems/edit'],
    goodsList: MallCommon.goodsList,
    goodsSpecList: MallCommon.goodsSpecList,
    serveList: MallCommon.serveList,
    serveCardList: MallCommon.serveCardList,
  };
})(DataForm);

